<!--
 * @Author: 无聊 7989314+Hwz1997@user.noreply.gitee.com
 * @Date: 2025-07-02 11:02:15
 * @LastEditors: 无聊 7989314+Hwz1997@user.noreply.gitee.com
 * @LastEditTime: 2025-10-28 15:32:20
 * @FilePath: \keep_motion_manger\src\components\autoTable\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="table-container">
    <el-table
      :data="tableData"
      :columns="columns"
      max-height="100%"
      height="100%"
      :row-key="rowKey"
      :tree-props="treeProps"
      :load="isTree ? load : null"
      :stripe="isStripe"
      :border="hasBorder"
      :lazy="isTree"
    >
      <!-- 循环 columns 生成表格列 -->
      <el-table-column
        v-for="col in columns"
        :key="col.prop"
        :label="col.label"
        :width="col.width"
        :align="col.align ? col.align : 'left'"
        :fixed="col.fixed ? col.fixed : false"
      >
        <!-- 渲染不同 type 的组件 -->
        <template #default="{ row }">
          <template v-if="col.type === 'switch'">
            <!-- 禁用 switch 组件 -->
            <el-switch v-model="row[col.prop]" disabled />
          </template>
          <template v-else-if="col.type === 'image'">
            <el-image class="table-image"
              :src="`${baseUrl}${row[col.prop]}`"
            />
          </template>
          <template v-else-if="col.type === 'action'">
            <el-tooltip
              v-for="btn in col.operate" 
              :key="btn.type" 
              :content="btn.label"
              placement="top"
            >
              <el-button 
                :icon="btn.icon"
                link 
                type="primary" 
                size="small" 
                @click="handleOperate(btn.type, row)">
                <span v-if="!btn.icon">{{ btn.label }}</span>
              </el-button>
            </el-tooltip>
          </template>
          <template v-else-if="col.type === 'strTotag'">
            <div class="tag-container">
              <el-tooltip :content="col.getTips(row[col.prop])" placement="top">
                <el-tag>{{ col.getTag(row[col.prop]) }}</el-tag>
              </el-tooltip>
            </div>
          </template>
          <template v-else-if="col.type === 'tag'">
            <div class="tag-container">
              <el-tooltip v-for="tag in row[col.prop]" :key="tag" :content="col.getTips(tag)" placement="top">
                <el-tag>{{ col.getTag(tag) }}</el-tag>
              </el-tooltip>
            </div>
          </template>
          <template v-else-if="col.type === 'select'">
            <el-select v-model="row[col.prop]" disabled class="tab-select">
              <el-option v-for="item in col.options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
          <template v-else-if="col.type === 'date'">
            <el-date-picker v-model="row[col.prop]" disabled :format="col.format" class="tab-date"/>
          </template>
          <template v-else-if="col.type === 'progress'">
            <el-progress :percentage="col.updateValue(row[col.prop])"/>
          </template>
          <template v-else>
            <span>{{ row[col.prop] }}</span>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import './index.css';
import { defineProps, defineEmits, onMounted } from 'vue';

const baseUrl = import.meta.env.VITE_BASE_URL;
import { dictDataApi } from '@/api';

const emit = defineEmits(['operate']);

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  },
  isTree: {
    type: Boolean,
    default: () => false
  },
  isStripe: {
    type: Boolean,
    default: () => false
  },
  hasBorder: {
    type: Boolean,
    default: () => true
  },
  load: {
    type: Function,
    default: () => null
  },
  rowKey: {
    type: String,
    default: () => 'id'
  },
  treeProps: {
    type: Object,
    default: () => ({
      children: 'children',
      hasChildren: 'hasChildren'
    })
  }
});
const handleOperate = (type, row) => {
  emit('operate', type, row);
}

const getOptions = async (code) => {
  // 这里可以根据 code 调用接口获取对应选项
  const res = await dictDataApi.getDictData({code});
  if (res.code === 200) return res.data.rows;
  return [];
};

onMounted(async () => {
  // 先获取所有下拉框的选项
  const optionPromises = props.columns
    .filter(item => item.type === 'select')
    .map(async (item) => {
      const options = await getOptions(item.optionsCode);
      item.options = options;
    });

  await Promise.all(optionPromises);
});
</script>
